<template>
  <div class="statistics-Detail">
    <head-top head-title="投票统计" hidden='true' go-back="true"></head-top>
    <div class="fixed" ref="fixed">
      <ul class="address">
        <li class="border-bottom wrapper" @click="goyuan" v-if="yuanList.length">
          <div class="yuan">
            <span>苑：</span>
            <span class="sdefault" v-show="!yuanValue">请选择苑</span>
            <span class="sdefault1" v-show="yuanValue">{{yuanValue}}</span>
          </div>
          <div class="img">
            <img src="../home/images/fanhui1@2x.png" alt="">
          </div>
        </li>
        <li class="border-bottom wrapper" @click="gozhuang">
          <div class="zhuang">
            <span>幢：</span>
            <span class="sdefault" v-show="!zhuangValue">请选择幢</span>
            <span class="sdefault1" v-show="zhuangValue">{{zhuangValue}}幢</span>
          </div>
          <div class="img">
            <img src="../home/images/fanhui1@2x.png" alt="">
          </div>
        </li>
        <li class="wrapper" @click="godanyuan">
          <div class="danyuan">
            <span>单元：</span>
            <span class="sdefault" v-show="!danyuanValue">请选择单元</span>
            <span class="sdefault1" v-show="danyuanValue">{{danyuanValue}}单元</span>
          </div>
          <div class="img">
            <img src="../home/images/fanhui1@2x.png" alt="">
          </div>
        </li>
      </ul>
      <div class="toupiao-tongji border-bottom">
        <span class="text">投票统计</span>
        <span class="look-vote" @click="lookVoteDetail">查看票数详情</span>
      </div>
      <ul class="nav">
        <li v-for="(item,index ) in dataList" :key="index" @click="clickContent(index)"><span
          :class="{'text': i === index}">{{item.name}}({{item.count || 0}})</span></li>
      </ul>
    </div>
    <div class="nav-wrapper">
      <!--现场未投票-->
      <form class="nav-container" id="form1">
        <ul class="toupiao-wrapper" ref="weitoupiao" v-show="i===0">
          <li class="tou-wrapper border-bottom-last" v-for="(item,index) in noVote" :key="index">
            <div class="left">{{item.name}}室</div>
            <div class="right_box">
              <div class="right">
                <div class="wei-color" :ref="'noVoteText'+index">未投票</div>
                <input class="wei-input1" @click="selectedVote($event,index)" :ref="'noVote'+index"
                       type="checkbox"
                       name="id" :value="`${3}_${item.id}`"
                       :id="item.id">
                <label :for="item.id"></label>
              </div>
              <div class="right2">
                <div class="wei-color" :ref="'noSendText'+index">未送票</div>
                <input class="wei-input2" @click="selectedSend($event,index)" :ref="'noSend'+index"
                       type="checkbox"
                       name="ids" :value="`${2}_${item.id}`"
                       :id="`${item.id}s`">
                <label :for="`${item.id}s`"></label>
              </div>
            </div>
          </li>
        </ul>
      </form>
      <!--现场未回收-->
      <form class="nav-container" id="form2">
        <ul class="toupiao-wrapper" ref="weiRecycle" v-show="i===1">
          <li class="tou-wrapper border-bottom-last" v-for="(item,key) in noRecycle" :key="key">
            <div class="left">{{item.name}}室</div>
            <div class="right3">
              <div class="wei-color">未回收</div>
              <input class="wei-input" @click="selectedRecycle($event,key)" type="checkbox" name="idr"
                     :value="`${3}_${item.id}`"
                     :id="`${item.id}r`">
              <label :for="`${item.id}r`"></label>
            </div>
          </li>
        </ul>
      </form>
      <!--电话票-->
      <form class="nav-container" id="form3">
        <ul class="toupiao-wrapper" ref="weiSend" v-show="i===2">
          <li class="tou-wrapper border-bottom-last" v-for="(item,indexs) in noVote" :key="indexs">
            <div class="left">{{item.name}}室</div>
            <div class="right3">
              <div class="wei-color">未投票</div>
              <input class="wei-input" @click="selectedPone($event,indexs)" type="checkbox" name="ids"
                     :value="`${4}_${item.id}`"
                     :id="`${item.id}d`">
              <label :for="`${item.id}d`"></label>
            </div>
          </li>
        </ul>
      </form>
    </div>
    <div class="btn_list">
      <button class="btn1" v-show="!showVote" @click="refreshBtn">刷新</button>
      <button class="btn2" v-show="!showVote" @click="goSubmit">确认提交</button>
    </div>
    <!--苑，幢，单元选择-->
    <mt-popup
      v-model="yuanVisible"
      popup-transition="popup-fade">
      <ul class="yuan-list">
        <li class="same border-bottom-last" v-for="(item, index) in yuanList" :key="'o'+index"
            @click="selectYuan(item.id, item.name)">{{item.name}}
        </li>
      </ul>
    </mt-popup>
    <mt-popup
      v-model="zhuangVisible"
      popup-transition="popup-fade">
      <ul class="yuan-list">
        <li class="same border-bottom-last" v-for="(item, index) in zhuangList" :key="'t'+index"
            @click="selectZhuang(item.id, item.name)" v-show="yid===item.pid">{{item.name}}幢
        </li>
        <li class="same border-bottom-last" v-for="(item, index) in zhuangList" :key="'s'+index"
            @click="selectZhuang(item.id, item.name)" v-show="yuanList.length===0">{{item.name}}幢
        </li>
      </ul>
    </mt-popup>
    <mt-popup
      v-model="danyuanVisible"
      popup-transition="popup-fade">
      <ul class="yuan-list">
        <li class="same border-bottom-last" v-for="(item, index) in danyuanList" :key="index"
            @click="selectDanyuan(item.id, item.name)" v-show="zid===item.pid">{{item.name}}单元
        </li>
      </ul>
    </mt-popup>
  </div>
</template>

<script>
  import headTop from '../header/Header.vue'
  import $ from 'jquery'
  import { getAreas, getVote, submitVote } from '../../api/toupiaotongji.js'
  import { Toast } from 'mint-ui'
  import { saveAreasName, loadAreasName } from '../../common/js/cache.js'

  export default {
    name: 'StatisticsDetail',
    data () {
      return {
        dataList: [{'name': '现场未投票'}, {'name': '现场未回收'}, {'name': '电话投票'}],
        i: 0,
        showVote: false,
        yuanVisible: false,
        danyuanVisible: false,
        zhuangVisible: false,
        yuanList: [],
        danyuanList: [],
        zhuangList: [],
        yid: -1,
        zid: -1,
        did: -1,
        yuanValue: '',
        zhuangValue: '',
        danyuanValue: '',
        voteStr: '',
        sendStr: '',
        recycleStr: '',
        alreadyVote: [],
        noVote: [],
        noSend: [],
        noRecycle: [],
        status: 4,
        selData: []
      }
    },
    created () {
      this._getAreas()
    },
    components: {
      headTop
    },
    beforeRouteEnter: (to, from, next) => {
      if (from.name === 'LookVoteDetail') {
        next(vm => {
          vm.yuanValue = loadAreasName().yuan
          vm.zhuangValue = loadAreasName().zhuang
          vm.danyuanValue = loadAreasName().danyuan
          vm.did = loadAreasName().danyuanid
          vm.zid = loadAreasName().zhuangid
          vm.yid = loadAreasName().yuanid
          vm._getVote(vm.did)
        })
      } else {
        next(vm => {
          vm.yuanValue = ''
          vm.zhuangValue = ''
          vm.danyuanValue = ''
        })
      }
    },
    methods: {
      lookVoteDetail () {
        if (!this.danyuanValue) {
          Toast({
            message: '还未选择单元',
            position: 'middle',
            duration: 1000
          })
          return
        }
        this.$router.push(`/my/LookVoteDetail/${this.did}/${this.$route.params.vid}`)
      },
      // 未投票选择按钮
      selectedVote (e, index) {
        // console.log(e.target.value)
        // this.$refs['noVote' + index][0].checked = true
        // this.$refs['noSendText' + index][0].innerHTML = '未送票'
        this.$refs['noVoteText' + index][0].style.color = '#0078de'
        this.$refs['noSendText' + index][0].style.color = '#666'
        this.$refs['noSend' + index][0].checked = false
        // 点击选中就把数据存放到数组里 并且字体和颜色也变化
        if (this.$refs['noVote' + index][0].checked) {
          this.$refs['noVoteText' + index][0].style.color = '#0078de'
          this.$refs['noVoteText' + index][0].innerHTML = '已投票'
          var dataStr = e.target.value
          var dataArr = dataStr.split('=').join('_').split('&')
          var data = []
          dataArr.forEach((item, index) => {
            data.push(item.split('_'))
          })
          for (var i = 0; i < data.length; i++) {
            this.selData[index] = data[i]
          }
        } else {
          this.$refs['noVoteText' + index][0].style.color = '#666'
          this.$refs['noVoteText' + index][0].innerHTML = '未投票'
          this.selData = []
        }
        if (!this.$refs['noSend' + index][0].checked) {
          this.$refs['noSendText' + index][0].innerHTML = '未送票'
        }
        // if (e.target.checked) {
        //   e.target.previousElementSibling.innerHTML = '已投票'
        //   e.target.previousElementSibling.style.color = '#0078de'
        // } else {
        //   e.target.previousElementSibling.innerHTML = '未投票'
        //   e.target.previousElementSibling.style.color = '#666'
        // }
        // this.voteStr = $('#form1').serialize().split('=').join('').split('id').join('').split('&').join(',')
        // console.log(this.selData)
      },
      // 未送票选择按钮
      selectedSend (e, index) {
        // this.$refs['noSend' + index][0].checked = true
        // this.$refs['noVoteText' + index][0].innerHTML = '未投票'
        this.$refs['noSendText' + index][0].style.color = '#0078de'
        this.$refs['noVoteText' + index][0].style.color = '#666'
        this.$refs['noVote' + index][0].checked = false
        if (this.$refs['noSend' + index][0].checked) {
          this.$refs['noSendText' + index][0].style.color = '#0078de'
          this.$refs['noSendText' + index][0].innerHTML = '已送票'
          var dataStr = e.target.value
          var dataArr = dataStr.split('=').join('_').split('&')
          var data = []
          dataArr.forEach((item, index) => {
            data.push(item.split('_'))
          })
          for (var i = 0; i < data.length; i++) {
            this.selData[index] = data[i]
          }
        } else {
          this.$refs['noSendText' + index][0].style.color = '#666'
          this.$refs['noSendText' + index][0].innerHTML = '未送票'
          this.selData = []
        }
        if (!this.$refs['noVote' + index][0].checked) {
          this.$refs['noVoteText' + index][0].innerHTML = '未投票'
        }
        // if (e.target.checked) {
        //   e.target.previousElementSibling.innerHTML = '已送票'
        //   e.target.previousElementSibling.style.color = '#0078de'
        // } else {
        //   e.target.previousElementSibling.innerHTML = '未送票'
        //   e.target.previousElementSibling.style.color = '#666'
        // }
        // this.sendStr = $('#form1').serialize().split('=').join('').split('ids').join('').split('&').join(',')
        // this.sendStr = e.target.value
      },
      // 未回收选择按钮
      selectedRecycle (e, index) {
        if (e.target.checked) {
          e.target.previousElementSibling.innerHTML = '已回收'
          e.target.previousElementSibling.style.color = '#0078de'
          var dataStr = e.target.value
          var dataArr = dataStr.split('=').join('_').split('&')
          var data = []
          dataArr.forEach((item, index) => {
            data.push(item.split('_'))
          })
          for (var i = 0; i < data.length; i++) {
            this.selData[index] = data[i]
          }
        } else {
          e.target.previousElementSibling.innerHTML = '未回收'
          e.target.previousElementSibling.style.color = '#666'
          this.selData = [] // 没选中就清除数组的数据
        }
        // this.recycleStr = $('#form3').serialize().split('=').join('').split('idr').join('').split('&').join(',')
      },
      // 电话投票
      selectedPone (e, index) {
        if (e.target.checked) {
          e.target.previousElementSibling.innerHTML = '已投票'
          e.target.previousElementSibling.style.color = '#0078de'
          var dataStr = e.target.value
          var dataArr = dataStr.split('=').join('_').split('&')
          var data = []
          dataArr.forEach((item, index) => {
            data.push(item.split('_'))
          })
          for (var i = 0; i < data.length; i++) {
            this.selData[index] = data[i]
          }
        } else {
          e.target.previousElementSibling.innerHTML = '未投票'
          e.target.previousElementSibling.style.color = '#666'
          this.selData = [] // 没选中就清除数组的数据
        }
      },
      _getAreas () {
        getAreas(this.$route.params.aid).then(res => {
          if (res.code === 200) {
            this.yuanList = res.data.yuan
            this.danyuanList = res.data.danyuan
            this.zhuangList = res.data.zhuang
            if (!this.yuanList.length) {
              this.$refs.weitoupiao.style.marginTop = 178 + 'px'
            } else {
              this.$refs.weitoupiao.style.marginTop = 222 + 'px'
            }
          }
        })
      },
      goyuan () {
        this.yuanVisible = true
      },
      gozhuang () {
        if (this.yuanList.length) {
          if (!this.yuanValue) {
            Toast({
              message: '请选择苑',
              position: 'middle',
              duration: 1000
            })
            return
          }
          this.zhuangVisible = true
        } else {
          this.zhuangVisible = true
        }
      },
      godanyuan () {
        if (!this.zhuangValue) {
          Toast({
            message: '请选择幢',
            position: 'middle',
            duration: 1000
          })
          return
        }
        this.danyuanVisible = true
      },
      selectYuan (id, name) {
        this.zhuangValue = ''
        this.danyuanValue = ''
        this.yid = id
        this.yuanValue = name
        this.yuanVisible = false
        this.noVote = []
        this.alreadyVote = []
      },
      selectZhuang (id, name) {
        this.danyuanValue = ''
        this.zid = id
        this.zhuangValue = name
        this.zhuangVisible = false
        this.noVote = []
        this.alreadyVote = []
      },
      selectDanyuan (id, name) {
        this.did = id
        this.danyuanValue = name
        this.danyuanVisible = false
        this.noVote = []
        this.alreadyVote = []
        this._getVote(this.did)
      },
      _getVote (did) {
        const areasName = {
          yuan: this.yuanValue,
          zhuang: this.zhuangValue,
          danyuan: this.danyuanValue,
          danyuanid: this.did,
          zhuangid: this.zid,
          yuanid: this.yid
        }
        getVote(did, this.$route.params.vid).then(res => {
          if (res.code === 200) {
            saveAreasName(areasName)
            this.noSend = res.data.voteService
            this.noVote = res.data.noVote
            this.noRecycle = res.data.voteRecovery
            var everyLength = [this.noVote.length, this.noRecycle.length, this.noVote.length]
            this.dataList.forEach((item, index) => {
              this.$set(item, 'count', everyLength[index])
            })
            // 每列选项未被选中的时候文字和样式
            $('#form1 .wei-input1').prop('checked', false).prev().text('未投票')
            $('#form1 .wei-input2').prop('checked', false).prev().text('未送票')
            $('#form2 .wei-input').prop('checked', false).prev().text('未回收')
            $('#form3 .wei-input').prop('checked', false).prev().text('未投票')
            if (!$('.wei-input').prop('checked') || !$('.wei-input1').prop('checked') || !$('.wei-input2').prop('checked')) {
              $('.wei-input').prev().css({'color': '#888'})
              $('.wei-input1').prev().css({'color': '#888'})
              $('.wei-input2').prev().css({'color': '#888'})
            }
          }
        })
      },
      clickContent (index) {
        this.i = index
        if (!this.yuanList.length) {
          this.$refs.weiSend.style.marginTop = 178 + 'px'
          this.$refs.weiRecycle.style.marginTop = 178 + 'px'
        }
        $('#form1 .wei-input1').prop('checked', false).prev().text('未投票')
        $('#form1 .wei-input2').prop('checked', false).prev().text('未送票')
        $('#form2 .wei-input').prop('checked', false).prev().text('未回收')
        $('#form3 .wei-input').prop('checked', false).prev().text('未投票')
        if (!$('.wei-input').prop('checked') || !$('.wei-input1').prop('checked') || !$('.wei-input2').prop('checked')) {
          $('.wei-input').prev().css({'color': '#888'})
          $('.wei-input1').prev().css({'color': '#888'})
          $('.wei-input2').prev().css({'color': '#888'})
        }
      },
      // 提交按钮
      goSubmit () {
        // console.log(this.selData)
        if (this.selData.length === 0) {
          Toast({
            message: '还未选择已投票房间',
            position: 'middle',
            duration: 1000
          })
          return
        }
        submitVote(this.$route.params.aid, this.$route.params.vid, this.selData).then(res => {
          if (res.code === 200) {
            Toast({
              message: '提交成功',
              position: 'middle',
              duration: 1000
            })
            // this.voteStr = ''
            // this.sendStr = ''
            // this.recycleStr = ''
            this.selData = []
            this._getVote(this.did)
          }
          if (res.code === 400) {
            Toast({
              message: res.error,
              position: 'middle',
              duration: 1000
            })
            this._getVote(this.did)
          }
        })
      },
      // 刷新按钮
      refreshBtn () {
        this._getVote(this.did)
        this.selData = []
        Toast({
          message: '刷新成功！',
          position: 'middle',
          duration: 1000
        })
      }
    }
  }
</script>

<style lang="scss">
  .statistics-Detail {
    width: 100%;
    padding-top: 40px;
    background: #fff;
    .wei-color {
      color: #888;
      margin-right: 25px;
      margin-top: 15px;
    }
    .yi-color {
      margin-right: 25px;
    }
    .fixed {
      width: 100%;
      position: fixed;
      top: 40px;
      left: 0;
      z-index: 2;
    }
    .address {
      width: 100%;
      border-bottom: 10px solid #f2f2f2;
      background: #fff;
    }
    .wrapper {
      background: #fff;
      margin: 0 10px;
      /*display: inline-flex;*/
      height: 44px;
      line-height: 44px;
      width: 94%;
      .yuan, .danyuan, .zhuang {
        /*flex: 3;*/
        width: 93%;
        background: #fff;
        display: inline-table;
        span {
          &:first-child {
            font-size: 16px;
          }
          &:last-child {
            font-size: 14px;
            color: #666;
          }
          &.sdefault {
            font-size: 14px;
            color: #0078de;
          }
          &.sdefault1 {
            font-size: 14px;
            color: #0078de;
          }
        }
      }
      .img {
        width: 5%;
        background: #fff;
        display: inline-table;
        /*text-align: right;*/
        img {
          width: 10px;
          height: 18px;
          vertical-align: middle;
        }
      }
    }
    .toupiao-tongji {
      width: 100%;
      background: #fff;
      height: 35px;
      line-height: 35px;
      .text {
        width: 40%;
        float: left;
        padding-left: 10px;
      }
      .look-vote {
        width: 26%;
        float: right;
        color: #0078de;
      }
    }
    .toupiao-wrapper {
      width: 100%;
      padding-bottom: 44px;
      margin-top: 220px;
      -webkit-overflow-scrolling: touch;
      background: #fff;
      .tou-wrapper {
        width: 100%;
        background: #fff;
        height: 50px;
        display: inline-flex;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        justify-content: space-around;
        align-items: center;
        .left {
          font-size: 16px;
          width: 30%;
        }
        .right_box {
          width: 60%;
          font-size: 14px;
          display: inline-flex;
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          justify-content: space-around;
          .right {
            clear: both;
            font-size: 14px;
            text-align: right;
            position: relative;
            /*top: -42px;*/
            height: 44px;
            width: 47%;
            input[type='checkbox'] {
              display: none
            }
            label {
              position: absolute;
              right: -8px;
              top: 12px;
            }
            label:before {
              content: '';
              position: absolute;
              left: -30px;
              top: 0;
              width: 16px;
              height: 16px;
              border: 1px solid #ddd;
              border-radius: 50%;
              transition: all 0.3s ease;
              -webkit-transition: all 0.3s ease;
              -moz-transition: all 0.3s ease;
            }
            label:after {
              content: '';
              position: absolute;
              left: -23px;
              top: 3px;
              width: 4px;
              height: 10px;
              border: 0;
              border-right: 1px solid #fff;
              border-bottom: 1px solid #fff;
              background: #fff;
              transform: rotate(45deg);
              transition: all 0.3s ease;
            }
            input[type='checkbox']:checked + label:before {
              background: #0087de;
              border-color: #0087de;
            }
            input[type='checkbox']:checked + label:after {
              background: #0087de;
            }
          }
          .right2 {
            clear: both;
            font-size: 14px;
            text-align: right;
            position: relative;
            /*top: -42px;*/
            height: 44px;
            width: 47%;
            input[type='checkbox'] {
              display: none
            }
            label {
              position: absolute;
              right: -8px;
              top: 12px;
            }
            label:before {
              content: '';
              position: absolute;
              left: -30px;
              top: 0;
              width: 16px;
              height: 16px;
              border: 1px solid #ddd;
              border-radius: 50%;
              transition: all 0.3s ease;
              -webkit-transition: all 0.3s ease;
              -moz-transition: all 0.3s ease;
            }
            label:after {
              content: '';
              position: absolute;
              left: -23px;
              top: 3px;
              width: 4px;
              height: 10px;
              border: 0;
              border-right: 1px solid #fff;
              border-bottom: 1px solid #fff;
              background: #fff;
              transform: rotate(45deg);
              transition: all 0.3s ease;
            }
            input[type='checkbox']:checked + label:before {
              background: #0087de;
              border-color: #0087de;
            }
            input[type='checkbox']:checked + label:after {
              background: #0087de;
            }
          }
        }
        .right3 {
          font-size: 14px;
          text-align: right;
          position: relative;
          /*top: -42px;*/
          height: 44px;
          width: 40%;
          input[type='checkbox'] {
            display: none
          }
          label {
            position: absolute;
            right: -8px;
            top: 12px;
          }
          label:before {
            content: '';
            position: absolute;
            left: -30px;
            top: 0;
            width: 16px;
            height: 16px;
            border: 1px solid #ddd;
            border-radius: 50%;
            transition: all 0.3s ease;
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
          }
          label:after {
            content: '';
            position: absolute;
            left: -23px;
            top: 3px;
            width: 4px;
            height: 10px;
            border: 0;
            border-right: 1px solid #fff;
            border-bottom: 1px solid #fff;
            background: #fff;
            transform: rotate(45deg);
            transition: all 0.3s ease;
          }
          input[type='checkbox']:checked + label:before {
            background: #0087de;
            border-color: #0087de;
          }
          input[type='checkbox']:checked + label:after {
            background: #0087de;
          }
        }
      }
    }
    .btn_list {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 44px;
      z-index: 2;
      background: rebeccapurple;
      .btn1 {
        width: 40%;
        height: 44px;
        background: #00c96c;
        float: left;
        border-radius: 0px;
        outline: none;
        color: #fff;
        font-size: 15px;

      }
      .btn2 {
        width: 60%;
        height: 44px;
        background: #0078de;
        border-radius: 0px;
        outline: none;
        color: #fff;
        font-size: 15px;
      }
    }

    .mint-popup {
      width: 60%;
      height: 200px;
      border-radius: 5px;
      ul {
        width: 100%;
        height: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
      }
      .same {
        height: 35px;
        line-height: 35px;
        text-align: center;
        font-size: 15px;
      }
    }
    .nav {
      width: 100%;
      height: 40px;
      line-height: 40px;
      border-bottom: 2px solid #f2f2f2;
      background: #fff;
      li {
        width: 33%;
        text-align: center;
        font-size: 12.4px;
        display: inline-block;
        height: 100%;
        .text {
          display: inline-block;
          height: 100%;
          padding: 0 10px;
          border-bottom: 2px solid #0078de;
          color: #0078de;
          width: 84%;
        }
      }
    }
  }
</style>
